<template>
  <div class="recommed">
    <!-- 轮播图 -->
    <div class="carousel_warpper">
      <ltCarousel :urls="bannerUrlList" :interval="5000"></ltCarousel>
    </div>
    <!-- 热门推荐列表 -->
    <div v-if="recommedStore.personalizedList.length > 0" class="play_list">
      <ltSelectTitle title="热门歌单" />
      <div class="list">
        <template v-for="item in recommedStore.personalizedList" :key="item.id">
          <playListItem :item="item" @click="gotoSongListDetail(item)"></playListItem>
        </template>
      </div>
    </div>
    <!-- 榜单 -->
    <div v-if="recommedStore.personalizedList.length > 0" class="rank_list">
      <ltSelectTitle title="榜单精选" :more="false" />
      <div class="list">
        <template v-for="item in recommedStore.rankingList" :key="item.id">
          <rankTop :item="item" @click="gotoRankDetailHandler(item.id)"></rankTop>
        </template>
      </div>
    </div>
    <!-- 热门推荐列表 -->
    <div v-if="recommedStore.newMusicList.length > 0" class="new_list">
      <ltSelectTitle title="最新音乐" @click="aotoNewAudioHandler" />
      <div class="list">
        <template v-for="item in recommedStore.newMusicList" :key="item.id">
          <lengthItem :item="item" @click="playAudioHander(item)"></lengthItem>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

import ltCarousel from '@renderer/base-ui/lt-carousel/index.vue'
import playListItem from './c-cnps/play-list-item.vue'
import lengthItem from './c-cnps/length-item.vue'
import ltSelectTitle from '@renderer/base-ui/lt-select-title/lt-select-title.vue'
import rankTop from './c-cnps/rank-top.vue'

import useRecommed from '@renderer/pinia/modules/recommed'
import usePlay from '@renderer/pinia/modules/play'

const recommedStore = useRecommed()
const playStore = usePlay()
const router = useRouter()

const bannerUrlList = ref<string[]>([]) // 轮播图数据

onMounted(async () => {
  // 轮播图的数据处理
  await recommedStore.getBannerList()
  bannerUrlList.value = recommedStore.bannerlist.map((item: any) => item.imageUrl)
  // 热门推荐的处理
  await recommedStore.getRecommedList()
  // 最新音乐的处理
  await recommedStore.getNewMusicList()
  // 获得排行榜数据
  await recommedStore.getRankingList()
})

// 点击播放歌曲(播放点击的歌曲)
const playAudioHander = (item: any) => {
  playStore.setCurrentAudio(item)
  playStore.setPlayList(item)
}

// 点击进入歌单列表
const gotoSongListDetail = (item) => {
  const id = item.id
  router.push('/play_list_detail?id=' + id)
}

// 前往最新音乐页面
const aotoNewAudioHandler = () => {
  router.push('/new_music')
}

// 点击进入榜单详情
const gotoRankDetailHandler = (id) => {
  router.push('/rank_list?id=' + id)
}
</script>

<style scoped lang="scss">
.recommed {
  .carousel_warpper {
    width: 100%;
    padding: 20px 30px;
    display: flex;
    justify-content: center;
  }

  .play_list,
  .new_list,
  .rank_list {
    padding: 0 30px;

    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }

  .new_list {
    .list {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
